<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../static/icon/iconfont.css">
    <link rel="stylesheet" href="../static/css/post.css">
    <script src="../static/echarts.min.js"></script>
</head>

<main>
    <div class="title"><span>城市分析</span></div>
    <hr>
    <div class="main-container">
        <script type="text/javascript">
            if({{flag}}==1){window.alert("没有该城市数据！");}
        </script>
        <form action="{{url_for('city_serach')}}" method="post" id="form">
            <div class="search">
                <div class="search-box"><input type="text" name="place" placeholder="请输入城市" ></div>
                <div class="search-icon"><i class="iconfont icon-sousuo"></i></div>
            </div>
        </form>   
        <br/>
        <div class="result-box" id="show" style="display:none;">
            <div id="charts" class="result-chart" style="width: 500px;height: 450px"></div>
                <script type="text/javascript">
                    var myChart = echarts.init(document.getElementById('charts'));
                    myChart.setOption({
                        title: {text: '{{ city }}地区工资分析',x: 'center',y: '95%',textStyle: {fontsize:12,fontWeight: "bold"}},
                        series : [
                            {color: ['#3291e1','#FF69B4','#91c7ae',  '#CD5C5C','#FFA500', '#c873d3', '#61f8ff', '#FFB6C1','#3dfa57','#749f83','#FFD700', '#808080','#d2f09b', '#61a0a8', '#d48265', '#749f83', '#ca8622','#4169E1','#FF69B4', '#CD5C5C','#FFA500', '#BA55D3', '#6A5ACD', '#00FFFF', '#FFB6C1','#00FA9A','#749f83','#2E8B57', '#FFD700', '#808080', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
                                name: 'test',
                                type: 'pie',    // 设置图表类型为饼图
                                radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                                data:[{% for x in data %}{value:{{x[1]}}, name:'{{x[0]}}'},{% endfor %}]
                            }],
                        legend:{left:'10', bottom:'20',width:450,data:[{% for item in  data %} '{{item[0]}}',{% endfor %}],
                        formatter:[ '{a|{name}}'].join('\n'),
                        textStyle:{rich:{a:{width:70,fontSize:10,lineHeight:10}}}},
                    })
                </script>
        </div>
    </div>
</main>
    <script>
        var btn = document.getElementsByClassName('search-icon')[0];
        var form = document.getElementById('form');
        btn.addEventListener('click',function () {form.submit();})
    </script>
    <script type="text/javascript">
        if({{flag2}}==1) {document.getElementById('show').style.display = "block"; }
    </script>
</html>